<template>
    <view class="zone">
        <Header title="新人攻略"></Header>
        <view class="list">
        	<view class="tabs">
        		<view :class="['tab',stat==item.id?'act':'']" v-for="(item,index) in tablist" :key="index"
        			@click="changeTab(item.id)">
        			{{item.name}}
        		</view>
        	</view>
            <view v-if="stat == 1">
                <image src="http://image.qxgm.site/tdz/img/tk/mg-22.png" mode="widthFix" class="img"></image>
            </view>
            <view v-if="stat == 2">
                <image src="http://image.qxgm.site/tdz/img/tk/mg-23.png" mode="widthFix" class="img"></image>
            </view>
            <view class="main">
            	<image class="yun" src="http://image.qxgm.site/tdz/img/public/m_yun.png" mode="widthFix"></image>
            	<image class="ping1" src="http://image.qxgm.site/tdz/img/public/ping1.png" mode="widthFix"></image>
                <view class="list">
                    <view class="tba">
                    	<view :class="['taba',stat2==item.id?'acts':'']" v-for="(item,index) in tablan" :key="index"
                    		@click="changeTab2(item.id)">
                    		{{item.name}}
                    	</view>
                    </view>
                    <view class="box" v-if="stat2 == 0">
                        <scroll-view class="info" scroll-y>
                        	<block v-for="(item,index) in list1" :key="index">
                                <view class="part">
                                    <view class="imgbox">
                                        
                                        <image class="header" src="http://image.qxgm.site/tdz/img/tk/d1.png" mode="widthFix"></image>
                                        <view class="name">{{item.name}}</view>
                                    </view>
                                	
                                	<view class="kpbox">
                                		<view class="pp1">
                                			<text>用途:</text>{{item.infor}}
                                		</view>
                                		<view class="pp2">
                                			<text>合成材料获得:</text>{{item.msg}}
                                		</view>             
                                	</view>
                                </view>
                            </block>
                        </scroll-view>
                    </view>
                    <view class="box" v-if="stat2 == 1">
                        <scroll-view class="info" scroll-y>
                        	<block v-for="(item,index) in list2" :key="index">
                                <view class="part">
                                    <view class="imgbox">
                                        <image class="header" src="http://image.qxgm.site/tdz/img/tk/d2.png" mode="widthFix"></image>
                                        <view class="name">{{item.name}}</view>
                                    </view>
                                	
                                	<view class="kpbox">
                                		<view class="pp1">
                                			<text>用途:</text>{{item.infor}}
                                		</view>
                                		<view class="pp2">
                                			<text>合成材料获得:</text>{{item.msg}}
                                		</view>             
                                	</view>
                                </view>
                            </block>
                        </scroll-view>
                    </view>
                    <view class="box" v-if="stat2 == 2">
                        <scroll-view class="info" scroll-y>
                        	<block v-for="(item,index) in list3" :key="index">
                                <view class="part">
                                    <view class="imgbox" style="position: relative;">
                                        <view class="namemsg">天道</view>
                                        <image class="header" src="http://image.qxgm.site/tdz/img/tk/d3.png" mode="widthFix"></image>
                                        <view class="name">{{item.name}}</view>
                                    </view>
                                	
                                	<view class="kpbox">
                                		<view class="pp1">
                                			<text>用途:</text>{{item.infor}}
                                		</view>
                                		<view class="pp2">
                                			<text>合成材料获得:</text>{{item.msg}}
                                		</view>             
                                	</view>
                                </view>
                            </block>
                        </scroll-view>
                    </view>
                    <view class="box" v-if="stat2 == 3">
                        <scroll-view class="info" scroll-y>
                        	<block v-for="(item,index) in list4" :key="index">
                                <view class="part">
                                    <view class="imgbox">
                                        <image class="header" src="http://image.qxgm.site/tdz/img/tk/d4.png" mode="widthFix"></image>
                                        <view class="name">{{item.name}}</view>
                                    </view>
                                	
                                	<view class="kpbox">
                                		<view class="pp1">
                                			<text>用途:</text>{{item.infor}}
                                		</view>
                                		<view class="pp2">
                                			<text>合成材料获得:</text>{{item.msg}}
                                		</view>             
                                	</view>
                                </view>
                            </block>
                        </scroll-view>
                    </view>
                </view>
            </view>
        </view>    
    </view>
</template>

<script>
export default {
		data() {
			return {
				tablist: [{
						id: 1,
						name: 'APP攻略',
						isrequest: false,
					},
					{
						id: 2,
						name: '简易攻略',
						isrequest: false,
					},
                    {
                    	id: 3,
                    	name: '炼丹攻略',
                    	isrequest: false,
                    },

				],
                tablan: [{
                		id: 0,
                		name: '突破丹',
                		isrequest: true,
                	},
                	{
                		id: 1,
                		name: '破镜丹',
                		isrequest: false,
                	},
                    {
                    	id: 2,
                    	name: '天道破镜丹',
                    	isrequest: false,
                    },
                    {
                    	id: 3,
                    	name: '战力丹',
                    	isrequest: false,
                    },
                ],
                list1:[
                    {
                        name:'练气突破丹',
                        infor:'用于练气境内突破',
                        msg:'探索千幻域-百花谷可直接获得成品丹'
                    },
                    {
                        name:'筑基突破丹',
                        infor:'用于筑基境内突破',
                        msg:'探索千幻域-古剑冢'
                    },
                    {
                        name:'结丹突破丹',
                        infor:'用于结丹境内突破',
                        msg:'探索千幻域-赤月崖'
                    },
                    {
                        name:'元婴突破丹',
                        infor:'用于元婴境内突破',
                        msg:'探索千幻域-大雪原'
                    },
                    {
                        name:'化神突破丹',
                        infor:'用于化神境内突破',
                        msg:'探索千幻域-寒冰宗'
                    },
                    {
                        name:'炼虚突破丹',
                        infor:'用于炼虚境内突破',
                        msg:'探索千幻域-斗兽场'
                    },
                    {
                        name:'合体突破丹',
                        infor:'用于合体境内突破',
                        msg:'探索千幻域-飞云涧'
                    },
                    {
                        name:'大乘突破丹',
                        infor:'用于大乘境内突破',
                        msg:'探索千幻域-百蛮山'
                    },
                    {
                        name:'真仙突破丹',
                        infor:'用于真仙境内突破',
                        msg:'探索千幻域-寒山镇'
                    },
                    {
                        name:'金仙突破丹',
                        infor:'用于金仙境内突破',
                        msg:'探索千幻域-黑水山'
                    },
                    {
                        name:'大罗突破丹',
                        infor:'用于大罗境内突破',
                        msg:'探索千幻域-绝天关'
                    },
                    {
                        name:'道祖突破丹',
                        infor:'用于道祖境内突破',
                        msg:'探索千幻域-炼丹峰'
                    },
                ],
                list2:[
                    {
                        name:'练气破境丹',
                        infor:'用于练气境突破至筑基境',
                        msg:'探索千幻域-百花谷可直接获得成品丹'
                    },
                    {
                        name:'筑基破境丹',
                        infor:'用于筑基境突破至结丹境',
                        msg:'探索千幻域-古剑冢、罗天域-云台山'
                    },  
                    {
                        name:'结丹破境丹',
                        infor:'用于结丹境突破至元婴境',
                        msg:'探索千幻域-赤月崖、罗天域-玉泉洞'
                    },
                    {
                        name:'元婴破境丹',
                        infor:'用于元婴境突破至化神境',
                        msg:'探索千幻域-大雪原、罗天域-天螺峪'
                    },
                    {
                        name:'化神破境丹',
                        infor:'用于化神境突破至炼虚境',
                        msg:'探索千幻域-寒冰宗、罗天域-药王谷'
                    }, 
                    {
                        name:'炼虚破境丹',
                        infor:'用于炼虚境突破至合体境',
                        msg:'探索千幻域-斗兽场、罗天域-玄宝阁'
                    }, 
                    {
                        name:'合体破境丹',
                        infor:'用于合体境突破至大乘境',
                        msg:'探索千幻域-飞云涧、罗天域-天羽宫'
                    },  
                    {
                        name:'大乘破境丹',
                        infor:'用于大乘境突破至真仙境',
                        msg:'探索千幻域-百蛮山、罗天域-丹霞山'
                    },
                    {
                        name:'真仙破境丹',
                        infor:'用于真仙境突破至金仙境',
                        msg:'探索千幻域-寒山镇、罗天域-万蛇坑'
                    },
                    {
                        name:'金仙破境丹',
                        infor:'用于金仙境突破至大罗境',
                        msg:'探索千幻域-黑水山、罗天域-往生池'
                    },
                    {
                        name:'大罗破境丹',
                        infor:'用于大罗境突破至道祖境',
                        msg:'探索千幻域-绝天关、罗天域-毒龙潭'
                    },
                    {
                        name:'道祖破境丹',
                        infor:'用于道祖境突破，无人知道下个是何境界',
                        msg:'探索千幻域-炼丹峰、罗天域-云浪谷'
                    },
                ],
                list3:[
                    {
                        name:'筑基破境丹',
                        infor:'用于筑基境突破至结丹境且必然成功',
                        msg:'探索千幻域-古剑冢、罗天域-云台山'
                    },
                    {
                        name:'结丹破境丹',
                        infor:'用于结丹境突破至元婴境且必然成功',
                        msg:'探索千幻域-赤月崖、罗天域-玉泉洞，药园种植紫熏草'
                    },
                    {
                        name:'元婴破境丹',
                        infor:'用于元婴境突破至化神境且必然成功',
                        msg:'探索千幻域-大雪原、罗天域-天螺峪，药园种植炙炎血葵'
                    },
                    {
                        name:'化神破境丹',
                        infor:'用于化神境突破至炼虚境且必然成功',
                        msg:'探索千幻域-寒冰宗、罗天域-药王谷，药园种植温玉化灵草'
                    },
                    {
                        name:'炼虚破境丹',
                        infor:'用于炼虚境突破至合体境且必然成功',
                        msg:'探索千幻域-斗兽场、罗天域-玄宝阁，药园种植万年白茯神'
                    },
                    {
                        name:'合体破境丹',
                        infor:'用于合体境突破至大乘境且必然成功',
                        msg:'探索千幻域-飞云涧、罗天域-天羽宫，药园种植血魂麝香'
                    },
                    {
                        name:'大乘破境丹',
                        infor:'用于大乘境突破至真仙境且必然成功',
                        msg:'探索千幻域-百蛮山、罗天域-丹霞山，药园种植土银花'
                    },
                    {
                        name:'真仙破境丹',
                        infor:'用于真仙境突破至金仙境且必然成功',
                        msg:'探索千幻域-寒山镇、罗天域-万蛇坑，药园种植天葵鸟尾草'
                    },
                    {
                        name:'金仙破境丹',
                        infor:'用于金仙境突破至大罗境且必然成功',
                        msg:'探索千幻域-黑水山、罗天域-往生池，药园种植地龙菊'
                    },
                    {
                        name:'大罗破境丹',
                        infor:'用于大罗境突破至道祖境且必然成功',
                        msg:'探索千幻域-绝天关、罗天域-毒龙潭，药园种植火灵血芝'
                    },
                    {
                        name:'道祖破境丹',
                        infor:'用于道祖境突破，无人知道下个是何境界',
                        msg:'探索千幻域-炼丹峰、罗天域-云浪谷，药园种植蟠果'
                    },
                ],
                list4:[
                    {
                        name:'筑基战力丹',
                        infor:'用于增加战力',
                        msg:'通天河水可探索千幻域获得，灵植可探索罗天域-云台山或药园种植灵泉乳'
                    },
                    {
                        name:'结丹战力丹',
                        infor:'用于增加战力',
                        msg:'通天河水可探索千幻域获得，灵植可探索罗天域-玉泉洞或药园种植天桂枝'
                    },
                    {
                        name:'元婴战力丹',
                        infor:'用于增加战力',
                        msg:'通天河水可探索千幻域获得，灵植可探索罗天域-天螺峪或药园种植聚灵彩莲'
                    },
                    {
                        name:'化神战力丹',
                        infor:'用于增加战力',
                        msg:'通天河水可探索千幻域获得，灵植可探索罗天域-药王谷或药园种植融血阳芝'
                    },
                    {
                        name:'炼虚战力丹',
                        infor:'用于增加战力',
                        msg:'通天河水可探索千幻域获得，灵植可探索罗天域-玄宝阁或药园种植土茯苓'
                    },
                    {
                        name:'合体战力丹',
                        infor:'用于增加战力',
                        msg:'通天河水可探索千幻域获得，灵植可探索罗天域-天羽宫或药园种植向天草'
                    },
                    {
                        name:'大乘战力丹',
                        infor:'用于增加战力',
                        msg:'通天河水可探索千幻域获得，灵植可探索罗天域-丹霞山或药园种植稀签曼'
                    },
                    {
                        name:'真仙战力丹',
                        infor:'用于增加战力',
                        msg:'通天河水可探索千幻域获得，灵植可探索罗天域-万蛇坑或药园种植赤精草'
                    },
                    {
                        name:'金仙战力丹',
                        infor:'用于增加战力',
                        msg:'通天河水可探索千幻域获得，灵植可探索罗天域-往生池或药园种植固本肉苁蓉'
                    },
                    {
                        name:'大罗战力丹',
                        infor:'用于增加战力',
                        msg:'通天河水可探索千幻域获得，灵植可探索罗天域-毒龙潭或药园种植幽冥草'
                    },
                    {
                        name:'道祖战力丹',
                        infor:'用于增加战力',
                        msg:'通天河水可探索千幻域获得，灵植可探索罗天域-云浪谷或药园种植月阳根'
                    },
                ],
				stat: 1,
                stat2:0
			}
		},
        onLoad(option) {
            if(option.id){
                this.stat = option.id
            }
        },
		methods: {
            
			// 切换
			changeTab(id) {
				this.stat = id
			},
            changeTab2(id) {
				this.stat2 = id
			},
		}
	}
</script>

<style lang="less">
    .part {
    	display: flex;
    	align-items: center;
    	background: url(http://image.qxgm.site/tdz/img/xianyu/mg-06.png) no-repeat;
    	background-size: 100% 100%;
    	padding: 0px 14px 8px;
    	margin-bottom: 4px;
    
    	.header {
    		width: 60px;
    		margin-right: 5px;
    		border-radius: 50%;
    	}
        .name{
            font-size: 12px;
        }
        .kpbox{
            margin-left: 10px;
            width: 80%;
        }
    	.pp1 {
    		font-size: 14px;
    		color: #333333;
            text{
                color:black;
            }
    	}
    
    	.pp2 {
    		font-size: 14px;
    		color: #333333;
    		margin-top: 5px;
            text{
                color:black;
            }
    	}
    }
    .namemsg{
        position: absolute;
        z-index: 9;
        font-size: 12px;
        top: 5px;
        left: -2px;
        -webkit-writing-mode: tb-rl;
        writing-mode: tb-rl;
    }
	.zone {
		min-height: 100vh;
		background: url(http://image.qxgm.site/tdz/img/public/p_bg.png) no-repeat;
		background-size: 100% auto;
	}
    
    .tabs {
    	width: 86%;
    	padding: 8px 16px;
    	display: flex;
    	align-items: center;
    	background: url(http://image.qxgm.site/tdz/img/lingchong/mg-04.png) no-repeat;
    	background-size: 100% 100%;
    	margin-bottom: 9px;
    
    	.tab {
    		width: 33%;
    		background: url(http://image.qxgm.site/tdz/img/public/tab2.png) no-repeat;
    		background-size: 100% 100%;
    		text-align: center;
    		font-size: 14px;
    		font-weight: normal;
    		color: #FFFED0;
    		line-height: 27px;
    		margin-right: 5px;
    	}
    
    	.act {
    		color: #A97D45;
    		background: url(http://image.qxgm.site/tdz/img/public/tab1.png) no-repeat;
    		background-size: 100% 100%;
    	}
    }
    .img{
        width: 100%;
    }
    
    
    .main {
    	position: relative;
    	background: url(http://image.qxgm.site/tdz/img/public/ping2.png);
    	background-size: 100% auto;
    	height: calc(100vh - 125px);
    	margin-top: 10px;
    	image {
    		width: 100%;
    	}
    
        .ping1 {
            width: 100%;
            display: flex;
        }
    
    	.yun {
    		position: absolute;
    		top: -3%;
    		left: 0;
    		width: 44%;
    		z-index: 9;
    	}

    }
    
    .tba {
    	display: flex;
    	align-items: center;
    	margin-bottom: 12px;
        margin-top: 10px;
    	.taba {
    		width: 22%;
    		text-align: center;
    		font-size: 13px;
    		color: #977848;
    		height: 28px;
    		font-weight: normal;
    		line-height: 28px;
    		background: url(http://image.qxgm.site/tdz/img/team/mg-03.png) no-repeat;
    		background-size: 100% 100%;
            margin-right: 5px;
    	}
    
    	.acts {
    		color: #fff;
    		background: url(http://image.qxgm.site/tdz/img/team/mg-02.png) no-repeat;
    		background-size: 100% 100%;
    	}
    }
    .info{
        height: calc(100vh - 193px);
        padding: 5px;
        box-sizing: border-box;
    }
</style>